<script setup lang="ts">
import { isArray, isString } from "@/utils";
import { PopoverPlacement } from "naive-ui";
import { computed } from "vue";
import { ZIconName } from "../Icon";

export interface ZIconTipProps {
  content?: string;
  tooltip?: string | string[];
  placement?: PopoverPlacement;
  icon?: ZIconName;
}

const props = withDefaults(defineProps<ZIconTipProps>(), {
  placement: "right",
  icon: "InformationIcon",
});

const tips = computed(() => {
  if (isString(props.tooltip)) return [props.tooltip];
  if (isArray(props.tooltip)) return props.tooltip;
  return [];
});
</script>

<template>
  <div style="display: inline-flex; align-items: center">
    <slot name="content">
      {{ content }}
    </slot>
    <n-tooltip v-if="tooltip" :placement="placement">
      <template #trigger>
        <z-icon :name="icon" style="margin-left: 4px" />
      </template>
      <div v-for="tip in tips" :key="tip">
        {{ tip }}
      </div>
    </n-tooltip>
  </div>
</template>
